<template>
  <div class="h-box" @scroll='loadingScroll'>
    <div>
      <!--<BotTabbar></BotTabbar>-->
      <Headers></Headers>
      <Lunbo :lunbotu="lunbotu" />
      <Fenlei></Fenlei>
    </div>
    <!-- 列表部分 -->
    <!--<div v-if="loadComplete">-->
    <Bottoms :list='botList'></Bottoms>
    <!--<load-more tip="正在加载更多" style="margin: 4px auto;"></load-more>
      </div>
      <div v-else style="text-align: center;">
  			<load-more tip="正在加载更多" style="margin: 4px auto;"></load-more>
  		</div>-->
    <div class="bot-tabbar" v-if='Chuxian'>
      <BotTabbar></BotTabbar>
    </div>
  
  </div>
</template>

<script>
// 请求加载更多
import { Scroller, LoadMore } from 'vux'

import Headers from '../components/Headers'
import Lunbo from '../components/Lunbo'
import Fenlei from '../components/Fenlei'
import Bottoms from '../components/Bottoms'

import BotTabbar from '../components/BotTabbar'

export default {
  components: {
    Headers,
    Lunbo,
    Fenlei,
    Bottoms,
    BotTabbar,
  },
  data: function () {
    return {
      lunbotu: [],   // 定义上面的轮播图为一个数组
      botList: [],    // 定义分类为一个数组
      isLoding: false, // 设置值进行上拉加载更多

      loadComplete: false,  //当前加载是否完成
      Chuxian: false,  // 下面的tabbar的出现     
    }
  },
  mounted: function () {
    this.requestLunbo();
    this.requestList();
    //  下面导航栏
    this.$el.onscroll = function (e) {
      //滚动偏移量
      var offset = e.target.scrollTop;
      this.currentOffset = offset;
      //元素本身高度
      var height = e.target.clientHeight;
      //元素的内容高度
      var contentHeight = e.target.scrollHeight;
       // 下导航栏
      if(offset > 180 ){
        this.Chuxian = true;
      }
      else{
        this.Chuxian = false;
      }

    }.bind(this);
  },
// scroll触发函数
  activated: function () {
    this.$el.scrollTop = this.currentOffset;
  },

  // 用于书写发送请求
  methods: {
    // 设置上拉加载更多
    loadingScroll(e) {
      if (this.isLoding) {
        return
      }
      var sh = e.target.offsetHeight;
      var ch = e.target.scrollHeight;
      var oh = e.target.scrollTop;
      if (oh + sh + 50 > ch) {
        console.log('到底了');
        this.requestList();
      }
    },
    // 轮播图的请求
    requestLunbo() {
      this.$http.get('dt/napi/mbanner/?', {
        params: {
          app_code: "mdt"
        }
      })
        .then(function (res) {
          // console.dir(res.data.data.object_list)
          this.lunbotu = res.data.data.object_list
          // console.dir(this.lunbotu)
        }.bind(this))
    },
    // 商品列表
    requestList() {
      this.isLoading = true
      this.$http.get('dt/napi/index/hot/?', {
        params: {
          start: 0,
          include_fields: ["sender", "album"],
          limit: 24,
          _: 1497275840452
        }
      })
        .then(function (res) {
          this.isLoding = false;
          // 上拉加载,多个数组合并成一个数组。
          this.botList = this.botList.concat(res.data.data.object_list)
          this.loadComplete = true;
        }.bind(this))
    },
  }
}
</script>

<style scoped>
.h-box {
  /*页面滚动必须给监听的盒子元素设置高*/
  height: 100vh;
  overflow: scroll;
  background-color: #F5F5F5;
}

.bot-tabbar {
  position: fixed;
  bottom: 0px;
}
</style>
